<script>
/**
 * 饼图组件
 * @description 折线图组件
 * @props
 * showTooltip: Boolean, 是否显示tooltip
 * tooltip: Object, tooltip配置
 * title: String, 标题
 * showLabel: Boolean, 是否显示标签
 * label: Object, 标签配置
 * showLegend: Boolean, 是否显示分类标签
 * legend: Object, 分类标签位置
 * datas: Array, 数据
 * seriesName: String, 系列名称
 * radius: String, 饼图半径
 * itemStyle: Object, 图样式
 * series: Array, 全体配置
 *
 *
 */
import * as echarts from "echarts";
import dingtheme from "../theme/dingTheme.json"
import macarons from "../theme/macarons.json"

export default {
  name: 'pie-charts',

  props: {
    // 是否显示提示框
    showTooltip: {
      type: Boolean,
      default: () => {
        return true
      }
    },

    // 提示框
    tooltip: {
      type: Object,
      default: () => {
        return {trigger: 'item'}
      }
    },

    // 标题
    title: {
      type: String,
      default: () => {
        return ''
      }
    },

    // 展示标签
    showLabel: {
      type: Boolean,
      default: () => {
        return true
      }
    },

    // 标签
    label: {
      type: Object,
      default: () => {
        return {}
      }
    },

    // 展示分类标签
    showLegend: {
      type: Boolean,
      default: () => {
        return false
      }
    },

    // 分类标签位置
    legend: {
      type: Object,
      default: () => {
        return {top: 'bottom',}
      }
    },

    // 数据
    datas: {
      type: Array,
      default: () => {
        return []
      }
    },

    // 系列名称
    seriesName: {
      type: String,
      default: () => {
        return ''
      }
    },

    // 饼图半径
    radius: {
      type: String,
      default: () => {
        return '50%'
      }
    },

    // 图样式
    itemStyle: {
      type: Object,
      default: () => {
        return {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
    },

    // 全体配置
    series: {
      type: Array,
      default: () => {
        return [{type: 'pie', emphasis: {}}]
      }
    },
  },

  data() {
    return {}
  },
  methods: {
    init() {
      echarts.registerTheme('dingtheme', dingtheme.theme)
      echarts.registerTheme('macarons', macarons.theme)
      this.$refs.pieChart.init(echarts, 'dingtheme', (chart) => {
        chart.setOption(this.creatOptions())
        this.$emit('finished')
      })
    },

    creatOptions() {
      let tooltip = {
        show: this.showTooltip,
        ...this.tooltip
      }
      tooltip.confine = true
      let title = {text: this.title}

      let legend = this.legend
      legend.show = this.showLegend
      let series = this.series
      series[0].data = series[0].data ?? this.datas
      series[0].name = series[0].name ?? this.seriesName
      series[0].radius = series[0].radius ?? this.radius
      series[0].emphasis.itemStyle = series[0].emphasis.itemStyle ?? this.itemStyle

      let label = this.label
      label.show = this.showLabel
      series[0].label = series[0].label ?? label

      return {
        tooltip: tooltip,
        label,
        title,
        legend,
        series: this.series,
      }
    },

    refreshOptions() {
      this.$refs.pieChart.setOption(this.creatOptions())
    }

  },
}


</script>

<template>
  <view class="line-chart">
    <l-echart ref="pieChart" @finished="init"/>
  </view>
</template>

<style scoped lang="scss">
.line-chart {
  color: #000000;
}

</style>